import React, { Component } from 'react';
import './index.scss'
import fetch from '../../../util/fetch'
import { message, Popover, Pagination, Select } from 'antd'
import { getRealPath } from '../../../util/public'
import Table from '../fileList'
import Scrollbars from "react-custom-scrollbars";
import Modal from '../modal'

import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';


const tableHeader = [
    {
        name: '',
        width: "7%",
        padding: "0 0 0 14px",
        key: 'statusSign',
    },
    {
        name: '标题',
        width: "37%",
        textAlign: "left",
        // order: true,
        // orderNum: 0,
        // orderSign: "title",
        padding: "0 20px 0 0",
        key: 'title',
    },
    {
        name: '发布时间',
        width: "18%",
        textColor: "#999",
        order: true,
        orderNum: 0,
        orderSign: "releaseTime",
        key: 'releaseTime'
    },
    {
        name: '发布对象',
        width: "12%",
        textAlign: "left",
        padding: "0",
        content: true,
        key: 'target'
    },
    {
        name: '已读/未读',
        width: "9%",
        textAlign: "left",
        padding: "0 20px 0 20px",
        key: 'readInfo'
    },
    {
        name: '操作',
        width: "17%",
        textAlign: "left",
        padding: "0 0 0 20px",
        key: 'operateBtn'
    }
]
const statusInfo = {
    "-1": "未发布",
    "0": "未发布",
    "1": "已发布"
}
const groupInfo = {
    "teachers": "教师",
    "students": "学生",
    "parents": "家长",
    "departments": "部门",
    "identities": "管理员",
    "persons": "个人",
    "devices": "设备"
}
class Body extends Component {
    constructor(props){
        super(props);
        this.state = {
            updateList: [],
            readVisible: false,
            readInfo: {},
            readProgressInfo: {},
            readGroupList: [],
            readUserList: [],
            readCurrentIndex: 1,
            readUserTotal: 0,
            selectType: "",
            readKind: 0, //0是未读，1是已读
            selectGroup: "",
            selectGroupInfo: {},
            allNoNum: 0,
            remindGap: "",
            readRegularVisible: false,
            timeList: [],
            currentTime: "",
            currentPage: 1,

            unreadNum: 0,
            readNum: 0,
        };
    }
    edit = (data) => {  //编辑
        let {
            changeCreate,
        } = this.props;
        changeCreate(true, data.noticeId);
    }
    urge = (data, type) => {  //催读

    }
    publish = (data) => {  //发布
        let {
            getList
        } = this.props;
        fetch.put({
            url: window.BasicProxy + 'api/notices/release'
        })
        .then((res)=>res.json())
        .then((result)=>{
            if(result.code === "200"){
                message.success("设置成功");
                getList("");
            }
        })
    }
    withdraw = (data) => {  //撤回
        let {
            setAlert,
            getList
        } = this.props;
        setAlert({
            visible: true,
            title: "确定要撤回该通知吗？",  
            onCancel: function(){
                setAlert({});
            },
            onOk: function(){
                fetch.put({
                    url: window.BasicProxy + 'api/notice/manage/callback?noticeId=' + data.noticeId,
                })
                .then((res)=>res.json())
                .then((result)=>{
                    if(result.code === "200"){
                        message.success("撤回成功");
                        if(window.opener){
                            window.opener.postMessage(JSON.stringify({
                                sysId: 220, 
                                operateType: "withdraw",
                                btnName: data.title,
                                noticeId: data.noticeId
                            }), "*");
                        }
                        if(window.parent){
                            window.parent.postMessage(JSON.stringify({
                                sysId: 220, 
                                operateType: "withdraw", 
                                btnName: data.title,
                                noticeId: data.noticeId
                            }), "*");
                        }
                        getList("");
                        setAlert({});
                    } else {
                        message.warn(result.msg);
                    }
                })
            }
        })
    }
    delete = (data) => {  //删除
        let {
            setAlert,
            getList
        } = this.props;
        setAlert({
            visible: true,
            title: "确定要删除该通知吗？",  
            onCancel: function(){
                setAlert({});
            },
            onOk: function(){
                fetch.delete({
                    url: window.BasicProxy + 'api/notice/manage/del?noticeId=' + data.noticeId,
                })
                .then((res)=>res.json())
                .then((result)=>{
                    if(result.code === "200"){
                        message.success("删除成功");
                        if(window.opener){
                            window.opener.postMessage(JSON.stringify({
                                sysId: 220, 
                                operateType: "delete",   //withdraw 撤回,  delete 删除
                                btnName: data.title,
                                noticeId: data.noticeId
                            }), "*");
                        }
                        if(window.parent){
                            window.parent.postMessage(JSON.stringify({
                                sysId: 220, 
                                operateType: "delete", 
                                btnName: data.title,
                                noticeId: data.noticeId
                            }), "*");
                        }
                        getList("");
                    } else {
                        message.warn(result.msg);
                    }
                    setAlert({});
                })
            }
        })
    }
    getDetail = (data) => {  //查看详情
        let {
            iframe
        } = this.props;
        console.log(this.props)
        console.log(window.opener)
        console.log(window.parent)
        sessionStorage.setItem("noticeId", data.noticeId);
        sessionStorage.setItem("noticeType", "publish");
        let url = getRealPath();
        console.log(data)
        if(iframe){
            // window.location.href = 
            //     url + "?lg_tk=" + sessionStorage.getItem("token") + 
            //     "&lg_ic=" + sessionStorage.getItem("identityCode") + 
            //     "&noticeId=" + data.noticeId + 
            //     "&status=" + data.status + 
            //     "&iframe=true" + 
            //     "#/noticeDetail"
            if(window.opener) {
                window.opener.postMessage(JSON.stringify({ 
                    "sysid": "220", 
                    "btnName": data.title, 
                    "url": url + 
                    "?lg_tk=" + sessionStorage.getItem("token") + 
                    "&lg_ic=" + sessionStorage.getItem("identityCode") + 
                    "&iframe=true" + 
                    "&status=" + data.status +
                    "&noticeId=" + data.noticeId + 
                    "#/noticeDetail" 
                }), '*');
            }
            if(window.parent) {
                window.parent.postMessage(JSON.stringify({ 
                    "sysid": "220", 
                    "btnName": data.title, 
                    "url": url + 
                    "?lg_tk=" + sessionStorage.getItem("token") + 
                    "&lg_ic=" + sessionStorage.getItem("identityCode") + 
                    "&iframe=true" +
                    "&status=" + data.status +
                    "&noticeId=" + data.noticeId + 
                    "#/noticeDetail" 
                }), '*');
            }
            return;
        }
        window.open(
            url + "?lg_tk=" + sessionStorage.getItem("token") + 
            "&lg_ic=" + sessionStorage.getItem("identityCode") + 
            "&noticeId=" + data.noticeId + 
            "&status=" + data.status + 
            "#/noticeDetail")
        // window.location.hash = "noticeDetail";
    }
    modalChange = (type, value) => {
        if(type === "read"){
            if(!value){
                clearInterval(window._interval);
                this.setState({
                    readVisible: value,
                    updateList: [],
                    readInfo: {},
                    readProgressInfo: {},
                    readGroupList: [],
                    readUserList: [],
                    readCurrentIndex: 1,
                    readUserTotal: 0,
                    selectType: "",
                    readKind: 0, //0是未读，1是已读
                    selectGroup: "",
                    selectGroupInfo: {},
                    allNoNum: 0,
                    remindGap: ""
                })
                return;
            }
            this.setState({
                readVisible: value
            })
        }
        if(type === "readRegular"){
            if(!value){
                this.setState({
                    readVisible: value,
                    updateList: [],
                    readInfo: {},
                    readProgressInfo: {},
                    readGroupList: [],
                    readUserList: [],
                    readCurrentIndex: 1,
                    readUserTotal: 0,
                    selectType: "",
                    readKind: 0, //0是未读，1是已读
                    selectGroup: "",
                    selectGroupInfo: {},
                    allNoNum: 0,
                    remindGap: "",
                    readRegularVisible: false,
                    timeList: [],
                    currentTime: "",
                    currentPage: 1
                })
                return;
            }
            this.setState({
                readRegularVisible: value
            }, ()=>{
                let t = setInterval(() => {
                    if(document.getElementById("num_echart")){
                        this.showEcharts2();
                        clearInterval(t);
                    }
                }, 1000);
            })
        }
    }
    //列表排序
    changeCount = (index, count, countSign) => {
        let {
            getList
        } = this.props;
        tableHeader[index].orderNum = count;
        if(countSign === "title"){
            tableHeader[3].orderNum = 0;
        }
        getList(-1, count, countSign);
    }
    getReadInfo = (data) => {
        // 获取分组
        fetch.get({
            url: window.BasicProxy + '/api/notice/receiver/struct/info',
            params: { noticeId: data.noticeId }
        })
        .then(res=>res.json())
        .then((result)=>{
            if(result.code === "200" && result.data){
                let schoolNameMap = {}
                let arr = []
                result.data.forEach((item)=>{
                  item.id = item.identityId || item.identityCode
                  item.name = item.identityName
                  if(schoolNameMap[item.schoolId]){
                    schoolNameMap[item.schoolId].list.push(item)
                  }else{
                    schoolNameMap[item.schoolId] = {
                      name: item.schoolName,
                      list: [item]
                    }
                  }
                })
                for(let key in schoolNameMap){
                  let obj = {
                    id: key,
                    name: schoolNameMap[key].name,
                    list: schoolNameMap[key].list
                  }
                  arr.push(obj)
                }
                this.setState({
                    readGroupList: arr,
                    readInfo: data,
                    readVisible: true
                }, ()=>{
                    this.getReadProgress({});
                })
            }
        })
    }
    setGapInterval = (date) => {
        if(!date){
            return;
        }
        clearInterval(window._interval);
        window._interval = setInterval(() => {
            this.getTimeGap(date);
        }, 1000);
    }
    getTimeGap = (date) => {
        if(!date){
            return;
        }
        let nowTime = Number(new Date().getTime());
        let targetTime = Number(new Date(date).getTime());
        //12个小时间隔时间
        let gapTime = 12*60*60*1000;
        let time = targetTime + gapTime - nowTime;
        if(time < 0){
            this.setState({
                remindGap: ""
            })
            clearInterval(window._interval);
            return;
        }
        let hour = Math.floor(time/1000/60/60);
        let minute = Math.floor((time%3600000)/1000/60);
        let second = Math.floor((time%3600000)%60000/1000);
        if(hour < 10){
            hour = "0" + hour;
        }
        if(minute < 10){
            minute = "0" + minute;
        }
        if(second < 10){
            second = "0" + second;
        }
        let str = hour + ":" + minute + ":" + second;
        this.setState({
            remindGap: str
        })
    }
    getReadProgress = (data) => {  //获取该类用户读取进度
        fetch.get({
          url: window.BasicProxy + '/api/notice/receiver/read/progress',
          params: {
            noticeId: this.state.readInfo.noticeId,
            schoolId: data.id || ""
          }
        }).then(res=>res.json())
        .then((result)=>{
            if(result.code === "200" && result.data){
                if(!data.id){
                    this.setState({
                        allNoNum: result.data.unReadNum
                    })
                }
                if(this.state.readInfo.status == 1){
                    this.getTimeGap(result.data.remindTime);
                    this.setGapInterval(result.data.remindTime);
                }
                this.setState({
                    readProgressInfo: result.data,
                    selectType: data.id || ""
                }, ()=>{
                    this.showEcharts(result.data);
                })
            }
        })
    }
    getReadUserList = (data, myReadKind = "") => {  //获取分组阅读已读、未读列表
        let {
            readCurrentIndex,
            readInfo,
            readKind
        } = this.state;
        let params = {
            noticeId: readInfo.noticeId,
            schoolId: data.schoolId,
            readStatus: myReadKind || readKind,
            identityCode: data.identityCode,
        };
        return new Promise(resolve => {
          fetch.get({
            url: window.BasicProxy + `/api/notice/receiver/page/read/progress/detail/${readCurrentIndex}/18`,
            params
          })
          .then(res=>res.json())
          .then((result)=>{
              if(result.code === "200" && Array.isArray(result.data)){
                  this.setState({
                      readUserList: result.data,
                      readUserTotal: result.total
                  }, () => resolve(result))
              }
          })
        })
    }
    readChangePage = (index) => {
        this.setState({
            readCurrentIndex: index
        }, ()=>{
            this.getReadUserList(this.state.selectGroupInfo);
        })
    }
    selectGroup = (data, e) => {
        e.stopPropagation();
        console.log("selectGroup", data);
        this.setState({
            selectGroup: data.id,
            selectGroupInfo: data,
            readCurrentIndex: 1,
            readKind: 0
        }, async()=>{
            if(data.id){
                let readInfo = await this.getReadUserList(data, 1);
                let unreadInfo = await this.getReadUserList(data, 0)
                this.setState({
                  unreadNum: unreadInfo.total,
                  readNum: readInfo.total
                })
            }
        })
    }
    changeReadKind = (value) => {
        this.setState({
            readKind: value,
            readCurrentIndex: 1
        }, ()=>{
            this.getReadUserList(this.state.selectGroupInfo);
        })
    }
    getcolor = (ReadCount, UnReadCount) => {
        var saleAmountTotal = Number(ReadCount);
        var saleAmountTotal2 = Number(UnReadCount);
        // 定义数据
        var data_10000001 = [{
            value: saleAmountTotal,
            name: '已读人数: ' + ReadCount,
            itemStyle: {
                normal: {
                    color: "#91cc75"
                }
            }
        }, {
            value: saleAmountTotal2,
            name: '未读人数：' + UnReadCount,
            itemStyle: {
                normal: {
                    color: "#ee6666"
                }
            }
        }];
        return data_10000001;
    }
    showEcharts = (data) => {
        let echart = echarts.init(document.getElementById("progress_echart"));
        let newData = this.getcolor(data.readNum, data.unReadNum);
        let borderWidth = 2;
        if (data.readNum == 0 || data.unReadNum == 0) {
            borderWidth = 0;
        }
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/> {b} ({d}%)"
            },
            legend: {
                type: 'plain',
                orient: 'vertical',
                right: '20%',
                top: 'center',
                data: ['已读人数: ' + data.readNum, '未读人数：' + data.unReadNum],
                itemGap: 20,
            },
            series: [
                {
                    name: '总览',
                    type: 'pie',
                    right: "30%",
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    minAngle: data.readNum == 0 || data.unReadNum == 0? 0: 5,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            borderWidth: borderWidth,
                            borderColor: '#fff',
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    hoverAnimation: true,
                    data: newData,
                    legendHoverLink: true,
                }
            ]
        };
        echart.setOption(option, true);
        window.addEventListener("resize", function(){
            echart.resize();
        })
    }
    childShow = (index, data, e) => {
        e.preventDefault();
        // if(data.id === "persons"){
            // this.selectGroup(data, e);
        //     return;
        // }
        let list = JSON.parse(JSON.stringify(this.state.readGroupList));
        list[index].hidden = list[index].hidden? false: true;
        this.setState({
            readGroupList: list
        })
    }
    render(){
        let {
            dataList,
            keyword
        } = this.props;
        let {
            readInfo,
            readProgressInfo,
            readGroupList,
            readUserList,
            readCurrentIndex,
            readKind,
            readUserTotal,
            selectGroup,
            selectGroupInfo,
            selectType,
            allNoNum,
            remindGap,
            currentPage,
            currentTime,
            timeList,
            unreadNum,
            readNum,
        } = this.state;
        let updateList = Array.isArray(dataList)? dataList.map((item, index)=>{
            let obj = {...item};
            obj.statusSign = obj.status === "1"? 
            <span className="status_doing" key={index}>已发布</span>:
            <span className="status_end" key={index}>{statusInfo[obj.status]}</span>

            obj.title = (
                <span 
                style={{cursor: item.status == "-1"? "default": "pointer"}} 
                onClick={item.status == "-1"? null: ()=>this.getDetail(item)} 
                title={item.title} 
                key={index}>
                    {/* {
                        item.noticeType === "1"?
                        <span style={{color: "#ff0000"}}>[紧急]</span>:
                        ""
                    } */}
                    {item.title && item.title.length > 28? item.title.substr(0, 28) + "...": item.title}
                    {
                        item.haveAttachment > 0?
                        <i className="attachmentlogo"></i>:
                        ""
                    }
                    {
                        item.timeType == 1?
                        <i className="regularlogo"></i>:
                        ""
                    }
                </span>
            )

            obj.readInfo = item.status === "1"?
            <span className="read_text" key={index} onClick={()=>this.getReadInfo(item)}>
                {item.readNum}/{item.unReadNum}
            </span>:
            "--";

            obj.releaseTime = item.releaseTime && item.releaseTime.substr(0, 16);
            if(item.timeType == 1){
                obj.releaseTime = (
                    <div className="time_container">
                        <p>{item.startTime && item.startTime.substr(0, 10)}-{item.endTime && item.endTime.substr(0, 10)}</p>
                        <p style={{color: "#ff6600", fontSize: "12px"}} title={item.timeRemark}>{item.timeRemark}</p>
                    </div>
                )
            }

            let targetArr = [];
            let receiverType = JSON.parse(item.receiverType)
            let receiverStr = receiverType.receiverStr
            receiverStr.length > 0 && receiverStr.forEach((item, index2)=>(
                targetArr.push(<span className="type_one" key={index2}>{item}</span>)
            ))
            let highArr = receiverType.high,
                juniorArr = receiverType.junior,
                primaryArr = receiverType.primary;
            let contentDiv = (
                <div className="popover_container">
                    {
                        highArr.length > 0?
                        <div className="popover_item">
                            <div className="popover_title">高中</div>
                            <div className="popover_school">
                                {
                                    highArr.map(item => {
                                        return <div className="type_one" key={item}>{item}</div>
                                    })
                                }
                            </div>
                        </div>:
                        ''
                    }
                    {
                        juniorArr.length > 0?
                        <div className="popover_item">
                            <div className="popover_title">初中</div>
                            <div className="popover_school">
                                {
                                    juniorArr.map(item => {
                                        return <div className="type_one" key={item}>{item}</div>
                                    })
                                }
                            </div>
                        </div>:
                        ''
                    }
                    {
                        primaryArr.length > 0?
                        <div className="popover_item">
                            <div className="popover_title">小学</div>
                            <div className="popover_school">
                                {
                                    primaryArr.map(item => {
                                        return <div className="type_one" key={item}>{item}</div>
                                    })
                                }
                            </div>
                        </div>:
                        ''
                    }
                </div>
            )
            if(targetArr.length){
                obj.target = (
                    <Popover 
                    placement="left" 
                    overlayClassName="popover_400"
                    key={"pop_" + index} 
                    content={contentDiv}>
                        <div 
                        className="table-td"
                        style={{
                            width: tableHeader[3].width? tableHeader[3].width: `${100/(tableHeader.length)}%`,
                            textAlign: tableHeader[3].textAlign? tableHeader[3].textAlign: "",
                            color: tableHeader[3].textColor? tableHeader[3].textColor: "",
                            padding: tableHeader[3].padding? tableHeader[3].padding: ""
                        }}
                        title={typeof item[tableHeader[3].key] === "string"? item[tableHeader[3].key]? item[tableHeader[3].key]: "--": ""}
                        >
                            {targetArr}
                        </div>
                    </Popover>
                )
            } else {
                obj.target = (
                    <div 
                    className="table-td"
                    style={{
                        width: tableHeader[3].width? tableHeader[3].width: `${100/(tableHeader.length)}%`,
                        textAlign: tableHeader[3].textAlign? tableHeader[3].textAlign: "",
                        color: tableHeader[3].textColor? tableHeader[3].textColor: "",
                        padding: tableHeader[3].padding? tableHeader[3].padding: ""
                    }}
                    title={typeof item[tableHeader[3].key] === "string"? item[tableHeader[3].key]? item[tableHeader[3].key]: "--": ""}
                    >
                        --
                    </div>
                )
            }
            
            let deviceSign = false;  //如果只有设备则不显示催读按钮
            item.receiverType && item.receiverType.split("、").forEach((item, index2)=>{
                if(item.indexOf("终端") === -1 && item.indexOf("班牌") === -1 && item.indexOf("楼牌") === -1){
                    deviceSign = true;
                }
            })
            
            obj.operateBtn = (
                <>
                {
                    item.status === "1"?
                    <>
                        <span className="red_text" onClick={()=>this.withdraw(item)} key={"re"+index}>撤回</span>
                    </>:
                    item.status === "0"?
                    <>
                        {/* <span className="common_text" onClick={()=>this.publish(item)} key={"urge"+index}>发布</span> */}
                        {/* <span className="slice_text" key={"line"+index}></span> */}
                        <span className="common_text" onClick={()=>this.edit(item)} key={"edt"+index}>编辑</span>
                        <span className="slice_text" key={"line2"+index}></span>
                        <span className="red_text" onClick={()=>this.delete(item)} key={"del"+index}>删除</span>
                    </>:
                    <span className="red_text" onClick={()=>this.delete(item)} key={"del"+index}>删除</span>
                }  
                </>
            )
            return obj;
        }): [];
        return (
            <div className="notice_publish">
                <Table
                tableHeader={tableHeader}
                getList={this.changeCount}
                scrollbar={false}
                emptyText={keyword? "搜素结果为空": ""}
                data={updateList}
                ></Table>
                
                {/* 进度 */}
                <Modal
                width={870} 
                height={532}
                className="read_modal"
                title="通知查收详情"
                visible={this.state.readVisible}
                noFooter={true}
                changeVisible={(value)=>this.modalChange("read", value)}>
                    <div className='echarts-left'>
                        <Scrollbars autoHeight autoHeightMax={474} autoHeightMin={474}>
                            <div 
                            className={`echarts-left-li echarts-left-li1 ${!selectGroup? "echarts-left-li-active": ""}`} 
                            onClick={(e)=>this.selectGroup({id: ""}, e)} >
                                <i className='left-lii-icon'></i>
                                总览
                            </div>
                            {
                                readGroupList.map((item, idx) => {
                                    return (
                                      <div>
                                        <div 
                                        key={idx} 
                                        className={`echarts-left-li echarts-left-li1 ${
                                           selectGroup.includes(item.id)? 
                                            "active": 
                                            ""
                                        }`}
                                        onClick={(e)=>this.childShow(idx, item, e)}
                                        title={item.name}>
                                            <i className='left-lii-icon left-lii-icon-school'></i>
                                            {item.name}
                                        </div>
                                        {
                                          item.list?
                                          item.list.map((it, id) => {
                                              return (
                                                  <div 
                                                  key={id} 
                                                  name={it[1]} 
                                                  className={`echarts-left-li echarts-left-li2 ${
                                                      it.id === selectGroup && it.parentId === selectGroupInfo.parentId? 
                                                      "echarts-left-li-active": 
                                                      ""
                                                  }`}
                                                  onClick={(e)=>this.selectGroup(it, e)} >
                                                      <i></i>
                                                      {it.name}
                                                  </div>
                                              )
                                          })
                                          :
                                          ""
                                        }
                                      </div>
                                    )
                                })
                            }
                        </Scrollbars>
                    </div>
                    <div className='echarts-right' style={{display: selectGroup? "block": "none"}}>
                        <div id='main11'></div>
                        <div className='right-people-list'>
                            <span><b>{selectGroup.name}</b>阅读详情</span>
                            <ul className='echarts-right-ul'>
                                <li 
                                onClick={() => this.changeReadKind(0)}
                                className={readKind == 0 ? 'echarts-right-li echarts-right-li-active' : 'echarts-right-li echarts-right-li-unActive'}>
                                未读{unreadNum || 0}</li>
                                <li 
                                onClick={() => this.changeReadKind(1)}
                                className={readKind == 1 ? 'echarts-right-li echarts-right-li-active' : 'echarts-right-li echarts-right-li-unActive'}>
                                已读{readNum || 0}</li>
                            </ul>
                            <ul 
                            className='right-people-ul clearfix'
                            style={{
                              borderBottomColor: readUserList.length > 0? "#cccccc": "transparent"
                            }}
                            >
                                {
                                    readUserList.length > 0 ? 
                                    readUserList.map((item, idx) => {
                                        return (
                                            <li key={idx} title={item.userName+ "["+item.userId+"]"} >
                                                <i style={{ backgroundImage: 'url(' + item.photoPath + ')' }} ></i>
                                                <p>{item.userName}<b>[{item.userId}]</b></p>
                                            </li>
                                        )
                                    }): 
                                    <div className="charts-right-emptylist">
                                        <i></i> 
                                        <p>{readKind == 1 ? '暂无已读人员名单~' : '暂无未读人员名单~'}</p>
                                    </div>
                                }
                            </ul>
                            <Pagination 
                            className="echarts-ant-Pagination" 
                            showQuickJumper 
                            showSizeChanger={false}
                            hideOnSinglePage={true} 
                            pageSize={18} 
                            current={readCurrentIndex} 
                            total={Number(readUserTotal)} 
                            onChange={this.readChangePage} />
                        </div>
                    </div>
                    <div className="echarts-right" style={{display: selectGroup? "none": "block"}}>
                        <div className='echarts-right-select'>
                          <span className='echarts-right-select-text'>阅读概况</span>
                          <Select
                          className='echarts-right-select-main'
                          value={selectType}
                          onChange={(value) => {
                            this.getReadProgress({id: value})
                          }}
                          >
                            <Select.Option value="">全部</Select.Option>
                            {
                              readGroupList.map(item => {
                                return <Select.Option value={item.id} title={item.name}>{item.name}</Select.Option>
                              })
                            }
                          </Select>
                        </div>
                        <div id="progress_echart" className='echarts-height'></div>
                    </div>
                </Modal>
            </div>
        )
    }
}
 
export default Body;